<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
	<style>
		body{
			position: relative;
			overflow-x: hidden;
			width: 100vw;
		}
		#canvas{
			position: absolute;
			z-index: 1;
		}
	</style>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>
  <body>
	  <canvas id="canvas">
	      你的浏览器不支持canvas
	  </canvas>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

<script>
	class Snowflake {
	      constructor(x, y, radius, speed) {
	        this.x = x;
	        this.y = y;
	        this.radius = radius;
	        this.speed = speed;
	      }
	 
	      draw(ctx) {
	        ctx.beginPath();
	        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
	        ctx.fillStyle = 'white';
	        ctx.fill();
	      }
	 
	      update(canvasHeight) {
	        this.y += this.speed;
	        if (this.y > canvasHeight) {
	          this.y = 0;
	        }
	      }
	}
	 
	    function init(){
			const canvas = document.getElementById('canvas');
			const ctx = canvas.getContext('2d');
			canvas.width = document.documentElement.offsetWidth;
			const ele = document.getElementsByClassName('main')[0]
			canvas.height = ele.offsetHeight
			// canvas.height = document.documentElement.offsetHeight;
			 
			let snowflakes = [];
			 
			// 添加雪花
			function addSnowflake() {
			  const x = Math.random() * canvas.width;
			  const y = 0;
			  const radius = Math.random() * 4 + 1;
			  const speed = Math.random() * 3 + 1;
			  snowflakes.push(new Snowflake(x, y, radius, speed));
			}
			 
			// 绘制画面
			function draw() {
			  ctx.clearRect(0, 0, canvas.width, canvas.height);
			  snowflakes.forEach(snowflake => snowflake.draw(ctx));
			}
			 
			// 更新画面
			function update() {
			  snowflakes.forEach(snowflake => snowflake.update(canvas.height));
			}
			 
			// 添加初始雪花
			for (let i = 0; i < 50; i++) {
			  addSnowflake();
			}
			 
			// 每隔一段时间添加雪花
			const timer = setInterval(addSnowflake, 100)
			 
			// 每帧更新画面和雪花位置
			function loop() {
				if(snowflakes.length > 300){
						clearInterval(timer)
				}
			  update();
			  draw();
			  requestAnimationFrame(loop);
			}
			 
			// 开始动画循环
			loop();
		}
		setTimeout(()=>{
			init()
		}, 1000)
</script>